/*
 * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *         http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@use 'sass:map';
@import '../../scss/theme/theme';

$loader-color: map.get($theme-primary, default);

:host {
  display: flex;
  justify-content: center;
}

@keyframes loader {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.loader {
  position: relative;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: translateZ(0) scale(1);
  transform-origin: 0 0;

  div {
    position: absolute;
    top: 60px;
    left: 60px;
    width: 60px;
    height: 60px;
    border: 10px solid $loader-color;
    border-radius: 50%;
    border-top-color: transparent;
    animation: loader 1s linear infinite;
  }
}

.loader-container {
  width: 120px;
  height: 120px;
}
